<script setup>
import { Search } from '@element-plus/icons-vue';
import CreatePlan from './create-plan.vue';

const value = ref('');
const options = [
  {
    value: 'Option1',
    label: 'Option1',
  },
  {
    value: 'Option2',
    label: 'Option2',
  },
  {
    value: 'Option3',
    label: 'Option3',
  },
  {
    value: 'Option4',
    label: 'Option4',
  },
  {
    value: 'Option5',
    label: 'Option5',
  },
];
const input = ref('');
const columns = ref([
  {
    label: '审计实施方案名称',
    prop: 'aaa',
  },
  {
    label: '模板类型',
    prop: 'bbb',
  },
  {
    label: '编制人',
    prop: 'ccc',
  },
  {
    label: '编制时间',
    prop: 'ddd',
  },
  {
    label: '是否提审',
    prop: 'eee',
    slot: 'eee',
  },
  {
    label: '被审单位',
    prop: 'fff',
  },
  {
    type: 'option',
    minWidth: 120,
    items: [
      {
        text: '下载',
        click: () => {},
      },
      {
        text: '在线编辑',
        click: () => {},
      },
      {
        text: '提审',
        click: () => {},
      },
      {
        text: '收回',
        click: () => {},
      },
      {
        text: '更正',
        click: () => {},
      },
      {
        text: '删除',
        click: () => {},
      },
    ],
  },
]);
const tableData = ref([{
  aaa: '审计实施方案名称A',
  bbb: '竣工结算审计',
  ccc: '张佳乐',
  ddd: '2023/08/14 17:47:00',
  eee: '已提审',
  fff: '集团总部、北京子公司',
}]);
const operateOptions = ref([
  {
    type: 'primary',
    icon: 'el-icon-plus',
    label: '创建方案',
    click: () => {
      handleCreatePlan();
    },
  },
]);
const createPlanRef = ref();

const handleCreatePlan = () => {
  createPlanRef.value.open();
};
</script>

<template>
  <el-container class="index-home-implementation-plan">
    <el-header class="header">
      <label class="header__label">审计实施方案</label>
      <div class="main__search">
        <div class="main__search-department">
          <el-select v-model="value" clearable placeholder="全部被审单位">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </div>
        <div class="main__search-plan">
          <el-input
            v-model="input"
            placeholder="请输入审计实施方案名称"
            :suffix-icon="Search"
          />
        </div>
      </div>
      <div class="main__table">
        <label class="table__tips">相关审计实施方案共计 20 个</label>
        <div class="table">
          <basic-table :columns="columns" :data="tableData" :operate-options="operateOptions">
            <template #eee>
              <el-tag @click="handleProcessView">已提审</el-tag>
            </template>
          </basic-table>
        </div>
      </div>
    </el-header>
    <create-plan ref="createPlanRef"></create-plan>
  </el-container>
</template>

<style lang="scss" scoped>
.index-home-implementation-plan {
  margin-top: 18px;

  .header {
    .header__label {
      height: 24px;
      font-size: 16px;
      font-weight: bold;
      color: #25292C;
      line-height: 24px;
      letter-spacing: 1px;
    }

    .main__search {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin: 0 auto;
      margin-top: 17px;
      height: 64px;
      background: #FFFFFF;
      border-radius: 2px;

      .main__search-department {
        padding-left: 24px;
      }
      .main__search-plan {
        width: 370px;
        padding-right: 24px;
      }
    }

    .main__table {
      margin-top: 16px;
      background: #FFFFFF;
      border-radius: 2px;
      padding: 15px 24px;

      .table__tips {
        height: 20px;
        font-size: 14px;
        color: #989DA3;
        line-height: 17px;
      }

      .table {
        margin-top: 17px;
      }
    }
  }
}
</style>
